<!--  -->
<template>
  <div class="hot-news">
    <div class="hot-news-header">
      <span>{{ newsTitle  }}</span>
      <a href="#">更多&gt;&gt;&gt;</a>
    </div>
    
    <div class="new-content" style="height: 320px;">
      <div class="image">
        <img :src="newsImage" alt="">
      </div>
      <div class="news-list">
        <ul class="content-list">
          <li v-for="(item, index) in newsList" :key="index" :class="{ 'active': index === activeIndex }" @click="goToDetail(index)">{{ item }}</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
//import hotnew from './hotnew.vue'
export default {
  props: {
    newsTitle: {
      type: String,
      required: true
    },
    newsType: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      newsList: [],
      activeIndex: -1
    }
  },
  created() {
    // 根据传入的 newsType 来选择对应的数据数组
    if (this.newsType === '人才培养') {
      this.newsList = this.hotNewsList
    } else if (this.newsType === '学生工作') {
      this.newsList = this.jobNewsList
    }
  },
  computed: {
    newsImage() {
      if (this.newsType === '人才培养') {
        return 'http://ie.hbue.edu.cn/_upload/article/images/89/f7/219ce76840459f6106a9c4c3d8c6/9724d86a-f7d3-4f3e-94d1-e2dc7b4ab043.png'
      } else if (this.newsType === '学生工作') {
        return 'http://ie.hbue.edu.cn/_upload/article/images/41/5d/c85faa774e0aabc85eec8f452404/627ca4c8-8b63-4049-bbe9-b7c0b837f3d8.png'
      }
      return ''
    },
    // 定义热点新闻数据数组
    hotNewsList() {
      return [
        '《面向对象程序设计》课程思政建设的研讨活动',
        '武汉软件工程职业学院计算机与信息学院',
        '我院开展2023届毕业设计（论文）答辩工作',
        '移动互联网软件工程方向PI团队五月活动',
        '机械工程学院关于公布第十四届创业大赛结果的 通知',
        '机械工程学院2023年职业教育活动周 学生技能节获奖学生公示',
        '全国三维数字化创新设计大赛华中四省赛区启动会顺利召开'
      ]
    },
    // 定义就业信息数据数组
    jobNewsList() {
      return [
        '与绿植同行，镌刻青春底色',
        '探索“智能制造” 体验职教魅力',
        '走访调研学经验 对标争先谋发展',
        '武汉市科技活动周，机械学子炫了一把',
        '武汉软件工程职业学院举办“互联网+”职业生涯规划大赛',
        '2023年大数据与人工智能专业怎样？',
        '全国三维数字化创新设计大赛华中四省赛区启动会顺利召开'
      ]
    }
  },
  methods: {
    goToDetail (index) {
      this.activeIndex = index
      this.$router.push({ name: 'content', params: { id: index }})
    }
  }
  // components:{
  //   'my-hotnew':hotnew
  // },
  
}
</script>

<style  scoped>
.hot-news {
  width: 40%;
  padding: 10px;
}

.hot-news-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ccc;
}

.hot-news-header span {
  font-size: 20px;
}

.hot-news-header a {
  font-size: 12px;
  color: #666;
  text-decoration: none;
}

.hot-news-header a:hover {
  color: #000;
}

.news-list {
  list-style: none;
  padding-left: 0;
  text-align: left;
}

.new-content {
  margin-top: 10px;
  display: flex;
  overflow: hidden;
}
.content-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.content-list li {
  margin-bottom: 10px;
  padding: 10px;
  background-color: #f5f5f5;
  cursor: pointer; /* 鼠标移上去显示手指 */
}
.content-list li:hover,
.content-list li.active {
  background-color: #4381E6;
  color: #fff;
}

.content-list li.active:hover {
  background-color: #2c65a7;
}
.image {
  flex: 1;
  /* width: 30%; */
  float: left;
  /* margin-right: 10px; */
}

.news-list {
  flex: 2;
  /* width: 68%; */
  float: left;
}

.content-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.content-list li {
  font-size: 16px;
  line-height: 24px;
  padding: 5px;
  border-bottom: 1px solid #ddd;
  cursor: pointer;
  overflow: hidden;
}

.content-list li.active {
  color: #f00;
}
</style>
